/* 
  目标： 使用Context来跨组价通信，让App组件-直接传数据给GrandSon组件
  
  1. React.createContext创建上下文, 解构出两个组件
  2. 使用Provider组件，传数据: 设置value属性传数据
  3. 使用Consumer组件，接收数据
      接受一个函数，返回需要返回一端JSX，形参就是Provider传来的数据

*/

import React from 'react';

// 1. React.createContext创建上下文, 解构出两个组件
const { Provider, Consumer } = React.createContext();
class App extends React.Component {
  state = {};
  render() {
    console.log('ref -----> ', Provider, Consumer);
    return (
      <div>
        <Provider value={{ name: 'zs', age: 20 }}>
          <Son></Son>
        </Provider>
      </div>
    );
  }
}
class Son extends React.Component {
  render() {
    return (
      <div>
        <Consumer>
          {(data) => {
            return (
              <div>
                我是Son组件 - {data.name} - {data.age}
                <GrandSon></GrandSon>
              </div>
            );
          }}
        </Consumer>
      </div>
    );
  }
}

class GrandSon extends React.Component {
  render() {
    return (
      <div>
        我是GrandSon组件
        <Consumer>
          {(data) => {
            return <div>{JSON.stringify(data)}</div>;
          }}
        </Consumer>
      </div>
    );
  }
}
export default App;
